import React, { Component } from 'react';
import { Card, Row, Col, Modal } from 'antd';

import './style.less';

export default class Gallery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgs: [
        ['1.png', '2.png', '3.png', '4.png', '5.png'],
        ['6.png', '7.png', '8.png', '9.png', '10.png'],
        ['11.png', '12.png', '13.png', '14.png', '15.png'],
        ['16.png', '17.png', '18.png', '19.png', '20.png'],
        ['21.png', '22.png', '23.png', '24.png', '25.png'],
      ],
      visible: false,
      currentUrl: ''
    }
  }

  render() {
    const { imgs, visible, currentUrl } = this.state;
    const imgList = imgs.map(list => list.map(item => {
      const url = require('./images/' + item);
      return (
        <Card
          key={url}
          cover={<img src={url} alt="" />}
          onClick={() => this.openGallary(url)}
        >
          <Card.Meta
            title="Pinlor"
            description="后台管理系统"
          />
        </Card>
      )
    }));
    return (
      <div>
        <Row gutter={10} className="pinlor-gallary">
          {
            imgList.map((list, i) => {
              return (
                <Col key={i} span={i < 4 ? 5 : 4}>
                  {list}
                </Col>
              )
            })
          }
        </Row>
        <Modal
          wrapClassName="pinlor-big-img"
          title="高清大图"
          visible={visible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img src={currentUrl} alt="" />
        </Modal>
      </div>
    )
  }

  openGallary = url =>{
    this.setState({
      currentUrl: url,
      visible: true
    });
  };
  handleCancel =() => {
    this.setState({
      visible: false
    })
  }
}
